<template>
	<view>
		<!-- #ifdef H5 || MP-WEIXIN  -->
		<view class="">
					<NavTitle title="任务中心" :backgroundColor='bgColor' @leftClick="leftClick"></NavTitle>
<!-- 			<u-navbar title="任务中心" :fixed="true" :placeholder="true" :safeAreaInsetTop="true" :autoBack="false"
				leftIconColor="#333" titleStyle="color:#333" @leftClick="leftClick" :bgColor="bgColor"></u-navbar> -->
			<image class="indexbg"
				src="https://images.fudiemall.com/storage/default/20250411/BG77ff634c5c493fbb0cb752c7b44d86c703900c11.png"
				mode="aspectFill"></image>
		</view>
		<!-- #endif -->
		<!-- #ifdef MP-ALIPAY -->
		<image class="indexbg"
			src="https://images.fudiemall.com/storage/default/20250411/BG77ff634c5c493fbb0cb752c7b44d86c703900c11.png"
			mode="aspectFill"></image>
		<!-- #endif -->
		<view class="top">
			<image class="topbg" :src="baseUrl + '/static/commonimg/tasktop.png'" mode="aspectFill"></image>
			<view class="topwrap" @click="golist">
				<image class="fire" :src="baseUrl + '/static/icon/fire.png'" mode="aspectFill"></image>
				<text class="c6 f28">我的活力值</text>
				<image class="right" :src="baseUrl +'/static/icon/right.png'" mode="aspectFill"></image>
			</view>
			<view class="number">
				{{user.vitality}}
			</view>
			<view class="btn" @click="allreceive">
				一键领取
			</view>
		</view>
		<view class="box_center">

			<view class="tit_top">
				<image class="task_bg" :src="baseUrl + '/static/commonimg/task_bg.png'" mode="aspectFill"></image>
				<view class="tit_txt">
					<text class="xxx">七天连续签到</text>
					<text class="line"></text>
				</view>
				<view class="box_center_wrap">
					<view class="box_center_item" v-for="item in info.reward_config" :key="item.id">
						<view class="box_center_item_top" v-if="info.continuous_days<item.day">

							<view class="box_center_item_txt2" v-if="info.continuous_days<item.day">
								+{{item.reward_number}}
							</view>
							<image class="icons"
								src="https://images.fudiemall.com/storage/default/20250523/no_fire8079cd1a4f5406d35e4715bf0026249d3a5bcc00.png"
								mode="aspectFill"></image>

						</view>
						<view class="box_center_item_top_other" v-if="info.continuous_days>=item.day">
							<view class="box_center_item_txt" v-if="info.continuous_days>item.day">
								已签
							</view>
							<view class="box_center_item_txt" v-if="info.continuous_days==item.day">
								今日已签
							</view>

							<image class="icons"
								src="https://images.fudiemall.com/storage/default/20250523/yes_firebd25a7f66dcaf3a1dcd8c6500b8a1ed155205c4c.png"
								mode="aspectFill"></image>
						</view>
						<text class="texts">第{{item.day_text}}天</text>
					</view>
					<!-- 					<view class="box_center_item">
						<view class="box_center_item_top_other">
							<view class="box_center_item_txt">
								今日已签
							</view>
							
							<image class="icons"
								src="https://images.fudiemall.com/storage/default/20250523/yes_firebd25a7f66dcaf3a1dcd8c6500b8a1ed155205c4c.png"
								mode="aspectFill"></image>
						</view>
						<text class="texts">第二天</text>
					</view>
					<view class="box_center_item">
						<view class="box_center_item_top">
							<view class="box_center_item_txt2">
								+3
							</view>
							<image class="icons"
								src="https://images.fudiemall.com/storage/default/20250523/no_fire8079cd1a4f5406d35e4715bf0026249d3a5bcc00.png"
								mode="aspectFill"></image>
						</view>
						<text class="texts">第二天</text>
					</view>
					<view class="box_center_item">
						<view class="box_center_item_top">
							<view class="box_center_item_txt2">
								+3
							</view>
							<image class="icons"
								src="https://images.fudiemall.com/storage/default/20250523/no_fire8079cd1a4f5406d35e4715bf0026249d3a5bcc00.png"
								mode="aspectFill"></image>
						</view>
						<text class="texts">第二天</text>
					</view>
					<view class="box_center_item">
						<view class="box_center_item_top">
							<view class="box_center_item_txt2">
								+3
							</view>
							<image class="icons"
								src="https://images.fudiemall.com/storage/default/20250523/no_fire8079cd1a4f5406d35e4715bf0026249d3a5bcc00.png"
								mode="aspectFill"></image>
						</view>
						<text class="texts">第二天</text>
					</view>
					<view class="box_center_item">
						<view class="box_center_item_top">
							<view class="box_center_item_txt2">
								+3
							</view>
							<image class="icons"
								src="https://images.fudiemall.com/storage/default/20250523/no_fire8079cd1a4f5406d35e4715bf0026249d3a5bcc00.png"
								mode="aspectFill"></image>
						</view>
						<text class="texts">第二天</text>
					</view>
					<view class="box_center_item">
						<view class="box_center_item_top">
							<view class="box_center_item_txt2">
								+3
							</view>
							<image class="icons"
								src="https://images.fudiemall.com/storage/default/20250523/no_fire8079cd1a4f5406d35e4715bf0026249d3a5bcc00.png"
								mode="aspectFill"></image>
						</view>
						<text class="texts">第二天</text>
					</view> -->
				</view>
			</view>
		</view>
		<view class="box_center" v-if="newuserList.length">

			<view class="tit_top">
				<image class="task_bg" :src="baseUrl + '/static/commonimg/task_bg.png'" mode="aspectFill"></image>
				<view class="tit_txt" style="width: 150rpx;">
					<text class="xxx">新手任务</text>
					<text class="line"></text>
				</view>
			</view>
			<view class="task_item" v-for="item in newuserList " :key="item.id">
				<image class="task_item_img" :src="item.icon" mode="aspectFill"></image>
				<view class="task_item_main">
					<view class="task_item_main_top">
						<text>{{item.name}}（{{item.completed_quantity}}/{{item.number}}）</text>
						<text></text>
					</view>
					<view class="task_item_main_bot">
						<image class="icons2"
							src="https://images.fudiemall.com/storage/default/20250523/no_fire8079cd1a4f5406d35e4715bf0026249d3a5bcc00.png"
							mode="aspectFill"></image>
						<text style="color: #ffc300;" class="f28">+{{item.vitality}}</text>
					</view>
					<view class="btn1" v-if="item.is_completed==1&&item.is_receive==0" @click="applyreceive(item.id)">
						领取
					</view>
					<view class="btn2" v-if="item.is_completed==0" @click="gonext(item.internal_url)">
						去完成
					</view>
					<view class="btn3" v-if="item.is_completed==1&&item.is_receive==1">
						已完成
					</view>
				</view>
			</view>
			<noDatas :xxxList="newuserList" :showMore="false"></noDatas>
		</view>
		<view class="box_center">

			<view class="tit_top">
				<image class="task_bg" :src="baseUrl + '/static/commonimg/task_bg.png'" mode="aspectFill"></image>
				<view class="tit_txt" style="width: 150rpx;">
					<text class="xxx">每日任务</text>
					<text class="line"></text>
				</view>
			</view>
			<view class="task_item" v-for="item in dayTasklist" :key="item.id">
				<image class="task_item_img" :src="item.icon" mode="aspectFill"></image>
				<view class="task_item_main">
					<view class="task_item_main_top">
						<text>{{item.name}}（{{item.completed_quantity}}/{{item.number}}）</text>
						<text></text>
					</view>
					<view class="task_item_main_bot">
						<image class="icons2"
							src="https://images.fudiemall.com/storage/default/20250523/no_fire8079cd1a4f5406d35e4715bf0026249d3a5bcc00.png"
							mode="aspectFill"></image>
						<text style="color: #ffc300;" class="f28">+{{item.vitality}}</text>
					</view>
					<view class="btn1" v-if="item.is_completed==1&&item.is_receive==0" @click="applyreceive(item.id)">
						领取
					</view>
					<view class="btn2" v-if="item.is_completed==0" @click="gonext(item.internal_url)">
						去完成
					</view>
					<view class="btn3" v-if="item.is_completed==1&&item.is_receive==1">
						已完成
					</view>
				</view>
			</view>
			<noDatas :xxxList="dayTasklist" :showMore="false"></noDatas>
			<!-- <view class="task_item">
				<image class="task_item_img" :src="baseUrl + '/static/icon/taskitem_1.png'" mode="aspectFill"></image>
				<view class="task_item_main">
					<view class="task_item_main_top">
						<text>完成实名认证</text>
						<text>（1/1）</text>
					</view>
					<view class="task_item_main_bot">
						<image class="icons2"
							src="https://images.fudiemall.com/storage/default/20250523/no_fire8079cd1a4f5406d35e4715bf0026249d3a5bcc00.png"
							mode="aspectFill"></image>
						<text style="color: #ffc300;" class="f28">+1</text>
					</view>

					<view class="btn2">
						去完成
					</view>
				</view>
			</view>
			<view class="task_item">
				<image class="task_item_img" :src="baseUrl + '/static/icon/taskitem_1.png'" mode="aspectFill"></image>
				<view class="task_item_main">
					<view class="task_item_main_top">
						<text>完成实名认证</text>
						<text>（1/1）</text>
					</view>
					<view class="task_item_main_bot">
						<image class="icons2"
							src="https://images.fudiemall.com/storage/default/20250523/no_fire8079cd1a4f5406d35e4715bf0026249d3a5bcc00.png"
							mode="aspectFill"></image>
						<text style="color: #ffc300;" class="f28">+1</text>
					</view>

					<view class="btn3">
						已完成
					</view>
				</view>
			</view> -->
		</view>
		<view class="box_center">

			<view class="tit_top">
				<image class="task_bg" :src="baseUrl + '/static/commonimg/task_bg.png'" mode="aspectFill"></image>
				<view class="tit_txt" style="width: 150rpx;">
					<text class="xxx">每周任务</text>
					<text class="line"></text>
				</view>
			</view>
			<view class="task_item" v-for="item in weektaskList" :key="item.id">
				<image class="task_item_img" :src="item.icon" mode="aspectFill"></image>
				<view class="task_item_main">
					<view class="task_item_main_top">
						<text>{{item.name}} （{{item.completed_quantity}}/{{item.number}}）</text>
						<text></text>
					</view>
					<view class="task_item_main_bot">
						<image class="icons2"
							src="https://images.fudiemall.com/storage/default/20250523/no_fire8079cd1a4f5406d35e4715bf0026249d3a5bcc00.png"
							mode="aspectFill"></image>
						<text style="color: #ffc300;" class="f28">+{{item.vitality}}</text>
					</view>
					<view class="btn1" v-if="item.is_completed==1&&item.is_receive==0" @click="applyreceive(item.id)">
						领取
					</view>
					<view class="btn2" v-if="item.is_completed==0" @click="gonext(item.internal_url)">
						去完成
					</view>
					<view class="btn3" v-if="item.is_completed==1&&item.is_receive==1">
						已完成
					</view>
				</view>
			</view>
			<noDatas :xxxList="weektaskList" :showMore="false"></noDatas>
		</view>
		<view class="box_center">

			<view class="tit_top">
				<image class="task_bg" :src="baseUrl + '/static/commonimg/task_bg.png'" mode="aspectFill"></image>
				<view class="tit_txt" style="width: 150rpx;">
					<text class="xxx">常驻任务</text>
					<text class="line"></text>
				</view>
			</view>
			<view class="task_item" v-for="item in conventionalTaskList" :key="item.id">
				<image class="task_item_img" :src="item.icon" mode="aspectFill"></image>
				<view class="task_item_main">
					<view class="task_item_main_top">
						<text>{{item.name}}</text>
					
					</view>
					<view class="task_item_main_bot">
						
						<text style="color: #999999;font-size: 24rpx;" class="f28">{{item.description}}</text>
					</view>

					<view class="btn1">
						自动完成
					</view>
				</view>
			</view>
			<noDatas :xxxList="conventionalTaskList" :showMore="false"></noDatas>
		</view>
		<view class="empty2">

		</view>
		<u-popup :show="tipShow" mode="center" @close="tipShow = false" closeable bgColor="transparent">
			<view class="prompt flex_ZC">
				<text class="f36">提示</text>
				<text class="prompt_tit">请前往福叠猫App完成该任务</text>
				<view class="prompt_ntm flex_ld_a">
					<text @click="tipShow = false">再想想</text>
					<text @click="godown()">现在去</text>
				</view>
			</view>
		</u-popup>
	</view>

	</view>
</template>

<script>
	import {
		myuser
	} from "../../api/user.js"
	import {
		dayTask,
		signIn,
		onceTask,
		weeklyTask,
		conventionalTask,
		receive,
		batchReceive
	} from "../../api/other.js"
	export default {
		data() {
			return {
				baseUrl: this.$imageBaseUrl,
				bgColor: "transparent",
				info: {},
				dayTasklist: [],
				newuserList: [],
				user: {},
				weektaskList: [],
				conventionalTaskList: [],
				tipShow:false
			}
		},
		onShow() {
			this.getuser()
			this.getdayTask()
			this.getonceTask()
			this.getsignIn()
			this.getweeklyTask()
			this.getconventionalTask()
			this.tipShow=false
		},
		methods: {
			godown(){
				this.tipShow=false
				uni.navigateTo({
					url:"/pageUser/download/download"
				})
			},
			leftClick() {
				//获取页面栈的长度
				const canNavBack = getCurrentPages()
				console.log(canNavBack.length);
				// 判断是否刷新了浏览器，刷新了浏览器，页面栈只有当前一个
				if (canNavBack.length > 1) {
					uni.navigateBack({
						delta: 1
					})
				} else {
					uni.switchTab({
						url: '/pages/index/cloudCatIndex'
					})
				}
			},
			allreceive() {
				batchReceive().then(res => {
					if(res.code==1){
						this.getuser()
						this.getdayTask()
						this.getonceTask()
						this.getsignIn()
						this.getweeklyTask()
						this.getconventionalTask()
					}
					uni.$u.toast(res.msg)
					
				})
			},
			gonext(url) {
				console.log(url, "sss")
				if (url == null) {
					// #ifdef MP-WEIXIN|| MP-ALIPAY
					uni.$u.toast('请前往福叠猫App完成该任务')
					
					// #endif
					// #ifdef H5
						this.tipShow=true
					// #endif
				} else {
					if (url == "/pages/index/cloudCatIndex" || url == '/pages/index/groundCat') {
						uni.switchTab({
							url: url
						})
					} else {
						uni.navigateTo({
							url: url
						})
					}
				}
			},
			refresh() {
				this.getuser()
				this.getdayTask()
				this.getonceTask()
				this.getsignIn()
				this.getweeklyTask()
				this.getconventionalTask()
			},
			applyreceive(id) {
				receive({
					task_id: id
				}).then(res => {
					if (res.code == 1) {
						this.refresh()
			
		}
					uni.$u.toast(res.msg)
				})
			},
			getconventionalTask() {
				conventionalTask().then(res => {
					this.conventionalTaskList = res.data
				})
			},
			getweeklyTask() {
				weeklyTask().then(res => {
					this.weektaskList = res.data
				})
			},
			getuser() {
				myuser().then(res => {
					this.user = res.data
				})
			},
			getonceTask() {
				onceTask().then(res => {
					this.newuserList = res.data
				})
			},
			getdayTask() {
				dayTask().then(res => {
					this.dayTasklist = res.data
				})
			},
			getsignIn() {
				signIn().then(res => {
					if (res.msg != '') {
						uni.$u.toast(res.msg)
					}
					this.info = res.data
					console.log(this.info)

				})
			},
			golist() {
				uni.navigateTo({
					url: "/pageUser/task/energylevel"
				})
			}
		},
		onPageScroll: function(e) {
			const scrollTop = e.scrollTop;
			if (scrollTop > 50) {
				this.bgColor = '#f7f7f7';
				this.title = '商家详情'
			} else {
				this.bgColor = 'transparent';
				this.title = ''
			}
		},
	}
</script>

<style scoped lang="scss">
	.indexbg {
		position: absolute;
		top: 0;
		left: 0;
		width: 750rpx;
		height: 460rpx;

	}

	.tit_top {
		position: relative;

	}

	.tit_txt {
		width: 208rpx;
		padding-top: 22rpx;
		margin-left: 22rpx;
		position: relative;
	}

	.xxx {
		font-weight: 700;
		font-size: 34rpx;
		color: #333333;
		z-index: 6;
		position: relative;
	}

	.task_bg {
		position: absolute;
		width: 698rpx;
		height: 88rpx;
	}

	.line {
		width: 68rpx;
		height: 10rpx;
		background-color: #FFC300;
		position: absolute;
		right: 15rpx;
		bottom: 5rpx;
	}

	.top {
		width: 715rpx;
		height: 258rpx;
		margin: 0 auto;
		margin-top: 20rpx;
		position: relative;
		z-index: 998;
		.topbg {
			width: 715rpx;
			height: 258rpx;
		}

		.topwrap {
			position: absolute;
			top: 94rpx;
			left: 24rpx;
			display: flex;
			align-items: center;

			.fire {
				width: 28rpx;
				height: 34rpx;
				margin-right: 20rpx;
			}

			.right {
				width: 12rpx;
				height: 22rpx;
				margin-left: 10rpx;
			}
		}

		.number {
			position: absolute;
			bottom: 42rpx;
			margin-left: 26rpx;
			font-weight: 700;
			font-size: 60rpx;
			color: #333333;

		}

		.btn {
			width: 174rpx;
			height: 56rpx;
			background: #FFC300;
			border-radius: 28rpx 28rpx 28rpx 28rpx;
			text-align: center;
			line-height: 56rpx;
			font-weight: 400;
			font-size: 28rpx;
			color: #333333;
			position: absolute;
			right: 44rpx;
			bottom: 44rpx;
		}
	}

	.box_center {
		width: 698rpx;
		min-height: 288rpx;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		margin: 0 auto;
		margin-top: 24rpx;
		padding-bottom: 20rpx;
	}

	.box_center_wrap {
		display: flex;
		justify-content: space-around;
		align-items: center;
		margin-top: 30rpx;
	}

	.box_center_item {
		display: flex;
		flex-direction: column;
		width: 76rpx;
		position: relative;
	}

	.task_item {
		display: flex;
		align-items: center;
		margin-top: 20rpx;
	}

	.task_item_main {
		width: 570rpx;
		margin-left: 30rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		position: relative;
	}

	.btn1 {
		width: 140rpx;
		height: 56rpx;
		background: #FFC300;
		border-radius: 28rpx 28rpx 28rpx 28rpx;
		text-align: center;
		line-height: 56rpx;
		position: absolute;
		right: 30rpx;
		top: 50%;
		transform: translateY(-50%);
		font-weight: 400;
		font-size: 28rpx;
		color: #333333;
	}

	.btn2 {
		width: 140rpx;
		height: 56rpx;
		border: 2rpx solid #FFC300;
		background: #fff;
		border-radius: 28rpx 28rpx 28rpx 28rpx;
		text-align: center;
		line-height: 56rpx;
		position: absolute;
		right: 30rpx;
		top: 50%;
		transform: translateY(-50%);
		font-weight: 400;
		font-size: 28rpx;
		color: #FFC300;
	}

	.btn3 {
		width: 140rpx;
		height: 56rpx;
		background: #F2F2F2;
		border-radius: 28rpx 28rpx 28rpx 28rpx;
		text-align: center;
		line-height: 56rpx;
		position: absolute;
		right: 30rpx;
		top: 50%;
		transform: translateY(-50%);
		font-weight: 400;
		font-size: 28rpx;
		color: #999999;
	}

	.task_item_main_top {
		width: 394rpx;
		display: flex;
		align-items: center;
		font-weight: 400;
		font-size: 30rpx;
		color: #333333;
	}	

	.task_item_main_bot {
		width: 400rpx;
		display: flex;
		align-items: center;
		margin-top: 10rpx;
	}

	.task_item_img {
		width: 80rpx;
		height: 80rpx;
		margin-left: 24rpx;
		// margin-top: 20rpx;
	}

	.icons2 {
		width: 28rpx;
		height: 28rpx;

	}

	.icons {
		width: 54rpx;
		height: 54rpx;
		position: absolute;
		left: 50%;
		bottom: 12rpx;
		transform: translateX(-50%);
	}

	.box_center_item_txt2 {
		font-weight: 400;
		font-size: 28rpx;
		color: #333333;
		text-align: center;
		margin-top: 14rpx;
	}

	.texts {
		font-weight: 400;
		font-size: 24rpx;
		color: #999999;
		margin-top: 10rpx;
	}

	.box_center_item_top {
		width: 76rpx;
		height: 140rpx;
		background: #F0F0F0;
		border-radius: 222rpx 222rpx 222rpx 222rpx;
		border: 2rpx solid rgba(255, 195, 0, 0.5);
		position: relative;
	}

	.box_center_item_top_other {
		position: relative;
		width: 76rpx;
		height: 140rpx;
		background: linear-gradient(180deg, rgba(255, 222, 7, 0.55) 23%, rgba(255, 195, 0, 0.13) 97%);
		border-radius: 222rpx 222rpx 222rpx 222rpx;
	}

	.box_center_item_txt {
		color: #D58E1F;
		width: 50rpx;
		margin: 0 auto;
		margin-top: 10rpx;
		font-weight: 400;
		font-size: 24rpx;
		text-align: center;
	}
	.prompt {
		width: 600rpx;
		background: #ffffff;
		margin: 0 auto;
		border-radius: 20rpx;
		padding-top: 10rpx;
		padding-bottom: 40rpx;
	}
	
	.prompt>text {
		margin-top: 40rpx;
	}
	
	.prompt_tit {
		margin: 0 30rpx;
		font-size: 28rpx;
		color: #666666;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}
	
	.prompt_ntm {
		width: 100%;
		font-size: 30rpx;
		margin-top: 50rpx;
	}
	
	.prompt_ntm>text:nth-child(1) {
		width: 200rpx;
		height: 72rpx;
		line-height: 72rpx;
		text-align: center;
		background: #F2F2F2;
		border-radius: 40rpx;
		color: #333333;
	}
	
	.prompt_ntm>text:nth-child(2) {
		width: 200rpx;
		height: 72rpx;
		line-height: 72rpx;
		text-align: center;
		background: linear-gradient(90deg, #FA2222 2%, #FFC400 98%);
		border-radius: 40rpx;
		color: #ffffff;
	}
</style>